<template>
  <el-cascader ref="cascader" @change="change" placeholder="请选择模板" :options="options" :value="selectedOptions" style="width: 100%;" :props="{
      value:'templetId',
      label:'templetName',
      children:'children'
    }">
  </el-cascader>
</template>
<script>
import { templetTree } from '@/utils/api'
export default {
  props: {
    clearable: {
      type: Boolean,
      default: false
    },
    value: Number
  },
  data() {
    return {
      options: [],
      selectedOptions: []
    }
  },
  created() {
    this.getData()
  },
  methods: {
    change(n) {
      const m = this.JSONs(n).pop()
      this.$emit('input', m)
    },
    async getData() {
      this.pload = false
      const Datas = await templetTree()
      const fn = item => {
        item.forEach(item => {
          if (item.children.length) {
            fn(item.children)
          } else {
            delete item.children
          }
        })
      }
      fn(Datas)
      this.options = Datas
      this.pload = true
      this.$nextTick(() => {
        if (this.value) {
          this.$refs.cascader.flatOptions.some(item => {
            // console.log(this.JSONs(item).pop().templetId)
            if (this.value === this.JSONs(item).pop().templetId) {
              this.selectedOptions = item.map(i => i.templetId)
              return true
            }
          })
        }
      })
    }
  }
}
</script>